<template>
	<view class="wrap-item" v-if="item">
		<view class="title-bg flex">
			<view class="must" v-if="item.require">
				*
			</view>
		
			<view class="title">
				{{ item.title }}
			</view>
		</view>
		
		<view class="wrap-add flex column">
			<view class="add-title">
				属性
			</view>
			
			<view class="add-bg flex align-center just-between">
				<input
					class="add-input"
					placeholder="请输入属性名称(多规格空格隔开)"
					placeholder-class="place"
					v-model="attr"
				/>
				
				<view class="add-btn" @click="onSureAttr">
					确定
				</view>
			</view>
		</view>
		
		<view v-if="spu.length > 0" class="spu-list">
			<block v-for="(spuItem, index) in spu" :key="index">
				<view class="spu-item flex column">
					<view class="spu-title-bg flex align-center just-between">
						<view>
							{{ spuItem.title }}
						</view>
						
						<image
							class="delete"
							:src="$staticImagePath('store/attr_delete.png')"
							@click="onDeleteAttr(index)"
						/>
					</view>
					
					<view class="add-bg flex align-center just-between">
						<input
							class="add-input"
							placeholder="多规格以空格隔开"
							placeholder-class="place"
							:value="spuItem.name"
							@input="onSkuNameInput($event, index)"
						/>
						
						<view class="add-btn" @click="onAddSubItem(index)">
							添加
						</view>
					</view>
					
					<view class="sub-spu-list" v-if="spuItem.skuitem.length > 0">
						<block v-for="(subSpuItem, idx) in spuItem.skuitem" :key="idx">
							<view class="sub-spu-item">
								{{ subSpuItem.name }}
								
								<image
									class="close"
									:src="$staticImagePath('store/attr_close.png')"
									@click="onDeleteSubItem(index, idx)"
								/>
							</view>
						</block>
					</view>
				</view>
			</block>
		</view>
		
	<!-- 	<view class="sku-list" v-if="value.length > 0">
			<block v-for="(skuItem, index) in value" :key="index">
				<view class="sku-item">
					<view class="sku-title">
						{{ skuItem.temp }}
					</view> -->
					
<!-- 					<view class="sub-sku-item flex column">
						<view class="sku-file-bg flex align-center">
							<view class="file flex align-center just-center">
								<image
									v-if="skuItem.thumbnail === ''"
									class="photo-item"
									:src="$staticImagePath('store/upload.png')"
									@click="onChooseImage(index)"
								/>
								
								<image
									v-else
									class="photo-item"
									:src="$wanlshop.oss(skuItem.thumbnail)"
								/>
							</view>
							
							<view class="file-right flex column just-around" style="height: 250rpx;">
								<view class="input-bg flex align-center just-between">
									<input
										class="input"
										placeholder="请输入售卖价"
										placeholder-class="place"
										type="digit"
										:value="skuItem.price"
										@input="onInputPrice($event, index)"
									/>
									
									<view class="input-unit">
										元
									</view>
								</view>
								
								<view class="input-bg flex align-center just-between">
									<input
										class="input"
										placeholder="请输入划线价"
										placeholder-class="place"
										type="digit"
										:value="skuItem.market_price"
										@input="onInputMarketPrice($event, index)"
									/>
									
									<view class="input-unit">
										元
									</view>
								</view>
								
								<view class="input-bg flex align-center just-between">
									<input
										class="input"
										placeholder="请输入会员价"
										placeholder-class="place"
										type="digit"
										:value="skuItem.vip_price"
										@input="onInputVIPPrice($event, index)"
									/>
									
									<view class="input-unit">
										元
									</view>
								</view>
							</view>
						</view>
						
						<view class="file-right flex align-center">
							<view class="input-bg flex align-center just-between">
								<input
									class="input"
									placeholder="库存"
									placeholder-class="place"
									type="number"
									:value="skuItem.stock"
									@input="onInputStock($event, index)"
								/>
								
								<view class="input-unit unit-active">
									件
								</view>
							</view>
							
							<view class="input-bg flex align-center just-between">
								<input
									class="input"
									placeholder="重量"
									placeholder-class="place"
									type="digit"
									:value="skuItem.weigh"
									@input="onInputWeigh($event, index)"
								/>
								
								<view class="input-unit unit-active">
									KG
								</view>
							</view>
							
							<view class="input-bg flex align-center just-between">
								<input
									class="input"
									placeholder="编码"
									placeholder-class="place"
									type="number"
									:value="skuItem.sn"
									@input="onInputSn($event, index)"
								/>
							</view>
						</view>
					</view> -->
	<!-- 			</view>
			</block>
		</view> -->
	</view>
</template>

<script>
	export default {
		props: {
			/**
			 * 输入框的值
			 */
			value: {
				type: Array,
				default: [],
			},
			/**
			 * 数据
			 */
			item: {
				type: Object,
				default: null,
			},
			/**
			 * 
			 */
			spu: {
				type: Array,
				default: [],
			},
		},
		data() {
			return {
				isCanChange: true,
				attr: "", //属性
				
			}
		},
		watch: {
			spu: {
				handler(newValue, oldValue) {
					if (newValue.length > 0 && this.isCanChange) {
						var titleList = [];
						newValue.forEach(item => {
							titleList.push(item.title);
						})
						this.attr = titleList.join(" ");
					}
				},
				immediate: true,
			}
		},
		methods: {
			/**
			 * 确定属性
			 */
			onSureAttr() {
				if (this.attr === "") {
					this.$st.show("请输入属性名称");
					return;
				}
				this.isCanChange = false;
				var list = this.attr.split(" ").filter(item => item.length > 0);
				var titleList = [];
				this.spu.forEach(item => {
					titleList.push(item.title);
				})
				if (this.onCalucationIsCommon(list, titleList)) {
					return;
				}
				
				var apuList = [];
				
				for (let i = 0; i < list.length; i++) {
					var obj = {
						title: list[i],
						name: "",
						skuitem: [],
					}
					apuList.push(obj);
				}
				this.updateValue([]);
				this.updateSpuData(apuList);
			},
			//判断2个数组是否相等
			onCalucationIsCommon(list1, list2) {
				var isCommon = false;
				
				if (list1.length !== list2.length) {
					isCommon = false;
				} else {
					var num = 0;
					for (let i = 0; i < list1.length; i++) {
						const item = list1[i];
						if (!list2.includes(item)) {
							num++;
						}
					}
					if (num === 0) {
						isCommon = true;
					} else {
						isCommon = false;
					}
				}
				
				return isCommon;
			},
			/**
			 * 删除属性
			 */
			onDeleteAttr(index) {
				var list = this.attr.split(" ").filter(item => item.length > 0);;
				list.splice(index, 1);
				this.attr = list.join(" ");
				
				var apuList = [...this.spu];
				apuList.splice(index, 1);
				this.updateSpuData(apuList);
			},
			/**
			 * 规格名称输入
			 */
			onSkuNameInput(e, index) {
				var list = [...this.spu];
				list[index].name = e.detail.value;
				this.updateSpuData(list);
			},
			/**
			 * 添加子规格
			 */
			onAddSubItem(index) {
				var list = [...this.spu];
				var name = list[index].name;
				var nameList = name.split(" ").filter(item => item.length > 0);;
				var skuItem = []
				for (let i = 0; i < nameList.length; i++) {
					var obj = {
						name: nameList[i]
					}
					skuItem.push(obj);
				}
				list[index].skuitem = skuItem;
				this.updateSpuData(list);
				this.updateValue([]);
				this.onCalculation();
			},
			/**
			 * 删除子规格
			 */
			onDeleteSubItem(index, idx) {
				var list = [...this.spu];
				var nameList = list[index].name.split(" ").filter(item => item.length > 0);
				nameList.splice(idx, 1);
				list[index].name = nameList.join(" ");
				list[index].skuitem.splice(idx, 1);
				this.updateSpuData(list);
				this.updateValue([]);
				this.onCalculation();
			},
			
			
			/**
			 * 计算
			 */
			async onCalculation() {
				var skuList = await this.getSkuListData();
				var lastArray = await this.getLastArray(skuList);
				var list = [];
				for (var i = 0; i < lastArray.length; i++) {
					let obj = {
						temp: lastArray[i],
						thumbnail: "",
						price: "",
						market_price: "",
						stock: "",
						vip_price: "",
						weigh: "",
						sn: ""
					};
					list.push(obj);
				}
				this.updateValue(list);
			},
			/**
			 * 获取所有的排列组合
			 */
			getLastArray(skuList) {
				return new Promise(async (resolve) => {
					let lastArray = [];
					for (let i = 0; i < skuList.length; i++) {
						let item = skuList[i];
						lastArray = await this.calculation(item, lastArray);
						if (i == skuList.length - 1) {
							resolve(lastArray);
						}
					}
				});
			},
			calculation(item, oneArray) {
				return new Promise((resolve) => {
					let bArray = [];
					for (let i = 0; i < item.length; i++) {
						let subItem = item[i];
						if (oneArray.length == 0) {
							bArray.push(subItem);
						} else {
							for (let j = 0; j < oneArray.length; j++) {
								let nextSubItem = oneArray[j];
								let value = nextSubItem + "," + subItem;
								bArray.push(value);
							}
						}
						if (i == item.length - 1) {
							resolve(bArray);
						}
					}
				});
			},
			/**
			 * 获取sku名字数组
			 */
			getSkuListData() {
				var list = [...this.spu];
				return new Promise((resolve) => {
					let skuList = [];
					for (let i = 0; i < list.length; i++) {
						let item = list[i];
						let array = [];
						for (let j = 0; j < item.skuitem.length; j++) {
							let subItem = item.skuitem[j];
							let sku = subItem.name;
							if (sku != "") {
								array.push(sku);
							}
						}
						skuList.push(array);
			
						if (i == list.length - 1) {
							resolve(skuList);
						}
					}
				});
			},
			
			/**
			 * 上传图片
			 */
			onChooseImage(index) {
				this.$filters.onChooseImage(1, (list) => {
					this.onUploadImage(list[0], index);
				});
			},
			/**
			 * 上传图片
			 */
			onUploadImage(file, index) {
				this.$commonNetwork.onUploadFile(file, (res) => {
					var list = [...this.value];
					list[index].thumbnail = res.url;
					this.updateValue(list);
				});
			},
			/**
			 * 售卖价格
			 */
			onInputPrice(e, index) {
				var list = [...this.value];
				list[index].price = e.detail.value;
				this.updateValue(list);
			},
			/**
			 * 划线价格
			 */
			onInputMarketPrice(e, index) {
				var list = [...this.value];
				list[index].market_price = e.detail.value;
				this.updateValue(list);
			},
			/**
			 * 会员价格
			 */
			onInputVIPPrice(e, index) {
				var list = [...this.value];
				list[index].vip_price = e.detail.value;
				this.updateValue(list);
			},
			/**
			 * 库存
			 */
			onInputStock(e, index) {
				var list = [...this.value];
				list[index].stock = e.detail.value;
				this.updateValue(list);
			},
			/**
			 * 重量
			 */
			onInputWeigh(e, index) {
				var list = [...this.value];
				list[index].weigh = e.detail.value;
				this.updateValue(list);
			},
			/**
			 * 编码
			 */
			onInputSn(e, index) {
				var list = [...this.value];
				list[index].sn = e.detail.value;
				this.updateValue(list);
			},
			
			/**
			 * 更新value
			 */
			updateValue(list) {
				this.$emit("input", list);
			},
			/**
			 * 更新spu数组
			 */
			updateSpuData(list) {
				this.$emit("update:spu", list);
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "../css/form.css";
	.wrap-add {
		margin-top: 30rpx;
		width: 100%;
		overflow: hidden;
		gap: 20rpx;
		
		.add-title {
			color: #333333;
			font-size: 26rpx;
		}
	}
	
	.add-bg {
		width: 100%;
		height: 70rpx;
		background-color: #FAFAFA;
		border-radius: 10rpx;
		overflow: hidden;
		padding: 0rpx 20rpx;
		box-sizing: border-box;
		gap: 20rpx;
		
		.add-input {
			flex: 1;
			overflow: hidden;
			font-size: 26rpx;
			color: #333333;
		}
		
		.add-btn {
			width: 114rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			color: white;
			font-size: 24rpx;
			background-color: #84BD00;
			border-radius: 10rpx;
			overflow: hidden;
		}
	}
	
	.spu-list {
		margin-top: 30rpx;
		width: 100%;
		overflow: hidden;
		
		.spu-item {
			width: 100%;
			overflow: hidden;
			margin-bottom: 30rpx;
			gap: 20rpx;
			
			&:last-child {
				margin-bottom: 0rpx;
			}
			
			.spu-title-bg {
				width: 100%;
				overflow: hidden;
				color: #333333;
				font-size: 26rpx;
				
				.delete {
					width: 28rpx;
					height: 28rpx;
				}
			}
			
			.sub-spu-list {
				width: 100%;
				overflow: hidden;
				display: flex;
				flex-wrap: wrap;
				gap: 20rpx;
				
				.sub-spu-item {
					padding: 0rpx 50rpx;
					box-sizing: border-box;
					height: 70rpx;
					line-height: 70rpx;
					text-align: center;
					background: #f1d8e1;
					border-radius: 10rpx;
					overflow: hidden;
					color: #84BD00;
					position: relative;
					
					.close {
						position: absolute;
						right: 20rpx;
						top: 50%;
						transform: translateY(-50%);
						width: 18rpx;
						height: 18rpx;
					}
				}
			}
		}
	}

	.sku-list {
		margin-top: 30rpx;
		width: 100%;
		overflow: hidden;
		
		.sku-item {
			width: 100%;
			overflow: hidden;
			margin-bottom: 40rpx;
			
			&:last-child {
				margin-bottom: 0rpx;
			}
			
			.sku-title {
				color: #333333;
				font-size: 26rpx;
			}
			
			.sub-sku-item {
				margin-top: 30rpx;
				width: 100%;
				overflow: hidden;
				gap: 15rpx;
				
				.sku-file-bg {
					width: 100%;
					overflow: hidden;
					gap: 15rpx;
					
					.file {
						width: 250rpx;
						height: 250rpx;
						overflow: hidden;
						background-color: #FAFAFA;
						
						.photo-item {
							width: 250rpx;
							height: 250rpx;
						}
					}
				}
				
				.file-right {
					flex: 1;
					overflow: hidden;
					gap: 20rpx;
				}
				
				.input-bg {
					flex: 1;
					height: 70rpx;
					overflow: hidden;
					background-color: #FAFAFA;
					border-radius: 10rpx;
					overflow: hidden;
					padding: 0rpx 20rpx;
					gap: 10rpx;
					
					.input {
						flex: 1;
						overflow: hidden;
						color: #333333;
						font-size: 26rpx !important;
					}
					
					.input-unit {
						color: #999999;
						font-size: 26rpx;
					}
					
					.unit-active {
						color: #84BD00 !important;
					}
				}
			}
		}
	}
</style>